<script lang="ts" setup name="B15RefAttr">
import { ref, defineExpose } from "vue";

const foobar = ref();
const x = ref(123);
const y = ref("abc");

const showWlfc = () => {
  console.log(foobar.value);
};

// 暴露给外界
defineExpose({ x, y });
</script>
<template>
  <h1 class="text-xl border-l-8 pl-3">标签的ref属性</h1>
  <div class="text-gray-400 text-xs my-3">ref属性对应的变量，名称要一致</div>
  <div class="my-3">
    <div>鹭鸶炒肉丝</div>
    <div>白鹭吸白露</div>
    <div ref="foobar">卧龙陪凤雏</div>
  </div>
  <div class="flex justify-start items-center gap-x-2">
    <button class="p-1 border shadow" @click="showWlfc">
      点我显示卧龙凤雏
    </button>
  </div>
</template>
